<script setup lang="ts">
import { computed, inject } from 'vue';
import type { TuiColProps } from './types';

// 设置默认值
const props = withDefaults(defineProps<TuiColProps>(), {
  span: 24,
  offset: 0,
  push: 0,
  pull: 0,
  xs: undefined,
  sm: undefined,
  md: undefined,
  lg: undefined,
  xl: undefined,
  tag: 'div'
});

// 尝试从父组件Row中注入gutter属性
const gutter = inject<number>('tui-row-gutter', 0);

// 计算Col类名
const colClass = computed(() => {
  const classes: string[] = ['tui-col'];
  const { span, offset, push, pull } = props;
  
  // 基础栅格类
  if (span !== undefined) {
    classes.push(`tui-col--span-${span}`);
  }
  
  if (offset !== 0) {
    classes.push(`tui-col--offset-${offset}`);
  }
  
  if (push !== 0) {
    classes.push(`tui-col--push-${push}`);
  }
  
  if (pull !== 0) {
    classes.push(`tui-col--pull-${pull}`);
  }
  
  // 响应式栅格类
  const responsiveProps = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
  responsiveProps.forEach((prop) => {
    const value = props[prop];
    if (value === undefined) return;
    
    if (typeof value === 'number') {
      classes.push(`tui-col--${prop}-${value}`);
    } else if (typeof value === 'object') {
      const { span, offset, push, pull } = value;
      if (span !== undefined) {
        classes.push(`tui-col--${prop}-${span}`);
      }
      if (offset !== undefined) {
        classes.push(`tui-col--${prop}-offset-${offset}`);
      }
      if (push !== undefined) {
        classes.push(`tui-col--${prop}-push-${push}`);
      }
      if (pull !== undefined) {
        classes.push(`tui-col--${prop}-pull-${pull}`);
      }
    }
  });
  
  return classes;
});

// 计算Col样式
const colStyle = computed(() => {
  return {
    paddingLeft: gutter ? `${gutter / 2}px` : undefined,
    paddingRight: gutter ? `${gutter / 2}px` : undefined
  };
});
</script>

<template>
  <component :is="props.tag" :class="colClass" :style="colStyle">
    <slot></slot>
  </component>
</template>

<style lang="scss" scoped>
.tui-col {
  position: relative;
  box-sizing: border-box;
  min-height: 1px;
  
  // 生成24个栅格类
  @for $i from 1 through 24 {
    &--span-#{$i} {
      width: calc(#{$i} / 24 * 100%);
    }
    
    &--offset-#{$i} {
      margin-left: calc(#{$i} / 24 * 100%);
    }
    
    &--push-#{$i} {
      left: calc(#{$i} / 24 * 100%);
    }
    
    &--pull-#{$i} {
      right: calc(#{$i} / 24 * 100%);
    }
  }
  
  // 响应式断点
  // xs: <768px
  @media (max-width: 767px) {
    @for $i from 1 through 24 {
      &--xs-#{$i} {
        width: calc(#{$i} / 24 * 100%);
      }
      
      &--xs-offset-#{$i} {
        margin-left: calc(#{$i} / 24 * 100%);
      }
      
      &--xs-push-#{$i} {
        left: calc(#{$i} / 24 * 100%);
      }
      
      &--xs-pull-#{$i} {
        right: calc(#{$i} / 24 * 100%);
      }
    }
  }
  
  // sm: ≥768px
  @media (min-width: 768px) {
    @for $i from 1 through 24 {
      &--sm-#{$i} {
        width: calc(#{$i} / 24 * 100%);
      }
      
      &--sm-offset-#{$i} {
        margin-left: calc(#{$i} / 24 * 100%);
      }
      
      &--sm-push-#{$i} {
        left: calc(#{$i} / 24 * 100%);
      }
      
      &--sm-pull-#{$i} {
        right: calc(#{$i} / 24 * 100%);
      }
    }
  }
  
  // md: ≥992px
  @media (min-width: 992px) {
    @for $i from 1 through 24 {
      &--md-#{$i} {
        width: calc(#{$i} / 24 * 100%);
      }
      
      &--md-offset-#{$i} {
        margin-left: calc(#{$i} / 24 * 100%);
      }
      
      &--md-push-#{$i} {
        left: calc(#{$i} / 24 * 100%);
      }
      
      &--md-pull-#{$i} {
        right: calc(#{$i} / 24 * 100%);
      }
    }
  }
  
  // lg: ≥1200px
  @media (min-width: 1200px) {
    @for $i from 1 through 24 {
      &--lg-#{$i} {
        width: calc(#{$i} / 24 * 100%);
      }
      
      &--lg-offset-#{$i} {
        margin-left: calc(#{$i} / 24 * 100%);
      }
      
      &--lg-push-#{$i} {
        left: calc(#{$i} / 24 * 100%);
      }
      
      &--lg-pull-#{$i} {
        right: calc(#{$i} / 24 * 100%);
      }
    }
  }
  
  // xl: ≥1920px
  @media (min-width: 1920px) {
    @for $i from 1 through 24 {
      &--xl-#{$i} {
        width: calc(#{$i} / 24 * 100%);
      }
      
      &--xl-offset-#{$i} {
        margin-left: calc(#{$i} / 24 * 100%);
      }
      
      &--xl-push-#{$i} {
        left: calc(#{$i} / 24 * 100%);
      }
      
      &--xl-pull-#{$i} {
        right: calc(#{$i} / 24 * 100%);
      }
    }
  }
}
</style>